<template>
	<view class="attention">
		<view-NoData v-if="attentList.length==0">
			
		</view-NoData>
		<view class="attention_one" v-for="(item,index) in attentList" :key="index">
			<view class="attention_one_left">
				<image @click="goUserInfo(item)" :src="item.avatar" mode="aspectFill"></image> {{item.nickname}}
			</view>
			<view class="attention_one_right" v-if="attentionID==0" @click="cancaleName(item,index)">
				取消关注
			</view>
			<view class="attention_one_right" v-if="attentionID==1" @click="attentionGuanzhu(item,index)">
				{{item.bothway==1?'互相关注':'关注'}}
			</view>
		</view>
	</view>
</template>

<script>
	import {myconcernList,myfansList,cancelConcern,addConcern} from "@/common/config/request.js"
	export default{
		data(){
			return {
				attentionID:"",//标识
				user_id:"",
				attentList:[],//列表
			}
		},
		onLoad(option) {
			this.attentionID=option.id
			this.user_id=option.user_id
			uni.setNavigationBarTitle({
				title:option.id==0?'我的关注':option.id==1?'我的粉丝':''
			})
			this.getAttent()//获取关注列表或者粉丝列表
		},
		methods:{
			goUserInfo(item){
				// console.log(item,'22222')
				uni.navigateTo({
					url:'/pages/user/info?uid='+item.id
				})
			},
			getAttent(){
				let data={
					user_id:this.user_id
				}
				if(this.attentionID==0){
					// 关注列表
					myconcernList(data).then(res=>{
						// console.log(res)
						this.attentList=res.data.data
					})
				}
				if(this.attentionID==1){
					// 粉丝列表
					myfansList(data).then(res=>{
						// console.log(res)
						this.attentList=res.data.data
					})
				}
			},
			cancaleName(item,index){
				var data={
					uid:item.id
				}
				console.log(item.id)
				uni.showModal({
					content:'是否取消关注',
					success: (res) => {
						console.log(res,'33333')
						if(res.confirm){
							console.log('进图')
							cancelConcern(data).then(res=>{
								console.log(res)
								if(res.data.code==1){
									uni.showToast({
										icon:'none',
										title:'取消成功'
									})
									this.attentList.splice(index,1)
								}
							})
						}
					}
				})
			},
			attentionGuanzhu(item,index){
				var data={
					uid:this.user_id
				}
				if(item.bothway!=1){
					uni.showModal({
						content:'是否关注',
						success: (res) => {
							// console.log(res,'33333')
							if(res.confirm){
								addConcern(data).then(res=>{
									if(res.data.code==1){
										uni.showToast({
											icon:'none',
											title:'关注成功'
										})
										this.attentList[index].bothway=1
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.attention{
		width: 750rpx;
		.attention_one{
			width: 750rpx;
			height: 136rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E2E2E2;
			.attention_one_left{
				image{
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					display: inline-block;
					vertical-align: middle;
					margin-left: 21rpx;
					margin-right: 11rpx;
				}
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.attention_one_right{
				width: 149rpx;
				height: 49rpx;
				line-height: 49rpx;
				text-align: center;
				background: linear-gradient(90deg, #FD9706 0%, #FBB414 100%);
				border-radius: 49rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 20rpx;
			}
		}
	}
</style>
